<template>
  <li>
    <label v-if="editId !== todo.id">
      <!-- <input type="checkbox" v-model="todo.isDone" /> -->
      <input
        type="checkbox"
        v-bind:checked="todo.isDone"
        @change="updateTodo(todo.id)"
      />
      <span :class="classObj">{{ todo.todoName }}</span>
    </label>
    <input
      type="text"
      v-else
      :value="todo.todoName"
      @keyup.enter="editTodoName(todo.id, $event)"
    />
    <button class="btn btn-danger" @click="delTodo(todo.id)">删除</button>
    <button
      class="btn btn-edit"
      :style="{ marginRight: '10px' }"
      @click="setEditId(editId !== todo.id ? todo.id : undefined)"
    >
      {{ editId !== todo.id ? '编辑' : '取消' }}
    </button>
  </li>
</template>

<script>
export default {
  props: [
    'todo',
    'updateTodo',
    'delTodo',
    'setEditId',
    'editId',
    'editTodoName',
  ],
  data() {
    // 在data函数中的this也是组件实例或vue实例
    return {
      classObj: {
        done: this.todo.isDone,
      },
    }
  },
  // computed: {
  //   classObj() {
  //     // console.log('计算属性更新了', this.todo.isDone)
  //     return {
  //       done: this.todo.isDone,
  //     }
  //   },
  // },

  watch: {
    // todo: {
    //   deep: true,
    //   handler(newValue) {
    //     this.classObj = {
    //       done: newValue.isDone,
    //     }
    //   },
    // },
    'todo.isDone': {
      handler(newValue) {
        this.classObj = {
          done: newValue,
        }
      },
    },
  },

  updated() {
    console.log('Item更新了')
  },
}
</script>

<style>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  display: flex;
  align-items: center;
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

.done {
  text-decoration: line-through;
  color: #ccc;
}
</style>
